<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻发布系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        .news-item {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 4px var(--shadow-color);
            transition: all var(--transition-speed);
        }

        .news-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px var(--shadow-color);
        }

        .news-item h3 {
            margin-bottom: 1rem;
        }

        .news-item h3 a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 1.4rem;
            transition: color var(--transition-speed);
        }

        .news-item h3 a:hover {
            color: var(--primary-color);
        }

        .news-item .meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        .news-item .meta i {
            color: var(--primary-color);
        }

        .news-item .preview {
            color: var(--text-light);
            margin: 1rem 0;
            line-height: 1.6;
        }

        .news-item .read-more {
            display: inline-block;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            margin-top: 1rem;
        }

        .news-item .read-more:hover {
            text-decoration: underline;
        }

        .page-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .page-header h1 {
            color: var(--text-color);
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .page-header p {
            color: var(--text-light);
            font-size: 1.1rem;
        }

        .navbar-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="logo">
                <h1>新闻发布系统</h1>
            </div>
            <div class="navbar-actions">
                <ul class="nav-links">
                    <li><a href="index.html" class="active"><i class="fas fa-newspaper"></i> 查看新闻</a></li>
                    <li><a href="publish.jsp"><i class="fas fa-edit"></i> 发布新闻</a></li>
                    <li><a href="manage.jsp"><i class="fas fa-cog"></i> 新闻管理</a></li>
                    <li><a href="login.jsp"><i class="fas fa-user"></i> 管理员登录</a></li>
                    <li><a href="contact.jsp"><i class="fas fa-envelope"></i> 联系管理员</a></li>
                </ul>
                <div class="clock-container">
                    <i class="fas fa-clock"></i>
                    <div class="clock-time" id="clockTime">00:00:00</div>
                    <div class="clock-date" id="clockDate">2024-03-15</div>
                </div>
                <button class="theme-toggle" id="themeToggle" title="切换主题">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
        </nav>
    </header>

    <main class="container">
        <div class="page-header">
            <h1>最新新闻</h1>
            <p>及时了解最新动态，掌握第一手资讯</p>
        </div>
        <div class="news-list">
            <div class="news-items">
                <!-- 新闻列表将通过JavaScript动态加载 -->
            </div>
            <div class="pagination">
                <button class="prev-btn"><i class="fas fa-chevron-left"></i></button>
                <div class="page-numbers">
                    <!-- 页码将通过JavaScript动态生成 -->
                </div>
                <button class="next-btn"><i class="fas fa-chevron-right"></i></button>
                <div class="page-jump">
                    <input type="number" min="1" placeholder="页码">
                    <button class="jump-btn">跳转</button>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2024 新闻发布系统 版权所有</p>
    </footer>

    <script src="js/main.js"></script>
    <script>
        // 时钟功能
        function updateClock() {
            const now = new Date();
            const timeElement = document.getElementById('clockTime');
            const dateElement = document.getElementById('clockDate');
            
            // 更新时间
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            timeElement.textContent = `${hours}:${minutes}:${seconds}`;
            
            // 更新日期
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            dateElement.textContent = `${year}-${month}-${day}`;
        }

        // 初始化时钟并每秒更新
        updateClock();
        setInterval(updateClock, 1000);

        // 主题切换功能
        const themeToggle = document.getElementById('themeToggle');
        const themeIcon = themeToggle.querySelector('i');
        
        // 检查本地存储中的主题设置
        const currentTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-theme', currentTheme);
        updateThemeIcon(currentTheme);

        themeToggle.addEventListener('click', () => {
            const newTheme = document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
            document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            updateThemeIcon(newTheme);
        });

        function updateThemeIcon(theme) {
            themeIcon.className = theme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
        }
    </script>
</body>
</html> 